import { useState, useRef } from 'react';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button, Modal, Form, message } from 'antd';
import RechargeForm from './components/RechargeForm';
import { getPayList, createPay } from '@/services/api/message';
import { getUserList } from '@/services/api/user';
// import styles from './index.less';

const RechargePage = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalData, setModalData] = useState();
  const actionRef = useRef();
  const userFormRef = useRef();
  const handleOk = () => {
    userFormRef.current?.form?.validateFields().then((values) => {
      setConfirmLoading(true);
      createPay({
        ...values,
        curNum: Number(values.curNum),
        userId: modalData.id,
      }).then((res) => {
        console.log(res);

        if (res.code === 0) {
          actionRef.current.reload();
          message.success(res.msg);
          setIsModalOpen(false);
        } else {
          // message.error(res.msg);
        }
        setConfirmLoading(false);
      });
    });
    // createPay()
  };

  const handleCancel = () => {
    setIsModalOpen(false);
    setModalData();
  };

  const columns = [
    {
      title: '用户id',
      dataIndex: 'id',
      hideInSearch: true,
    },
    {
      title: '用户名',
      dataIndex: 'username',
    },
    {
      title: '条数',
      dataIndex: 'num',
      hideInSearch: true,
    },

    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={() => {
              setIsModalOpen(true);
              setModalData(record);
            }}
          >
            充值
          </a>
        </>
      ),
    },
  ];
  return (
    <PageContainer ghost>
      <ProTable
        // headerTitle="查询表格"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 120,
        }}
        toolBarRender={() => [
          <Button key="1" type="primary" onClick={() => setIsModalOpen(true)}>
            新建
          </Button>,
        ]}
        request={async (params, sorter, filter) => {
          const { current, pageSize, ...leftParams } = params;

          const { data, code } = await getUserList({
            ...leftParams,
            page: current,
            pageSize,
          });
          return {
            data: data?.list || [],
            success: code === 0,
            total: data?.total,
          };
        }}
        columns={columns}
      />
      <Modal
        title={'充值'}
        open={isModalOpen}
        onOk={handleOk}
        confirmLoading={confirmLoading}
        onCancel={handleCancel}
        destroyOnClose
      >
        <RechargeForm ref={userFormRef} data={modalData}></RechargeForm>
      </Modal>
    </PageContainer>
  );
};

export default RechargePage;
